<script setup lang="ts">
import { ref } from 'vue'
// 引入Ref类型 在import后面添加type
import type { Ref } from 'vue'
// 从model文件中导入自定义类型
import type {PersonInterface} from '../models/HelloWorldModel'

defineProps<{ msg: string }>()

// ref是一个泛型方法，泛型的类型参数可以不填，会自动根据参数推断
const count = ref<number>(0)
// 箭头函数类型
const updateCount = (num: number): void => {
  count.value += num
}

// 数组类型
let arr: number[] = [1, 2, 3]
// Ref是一个泛型类
// let xm: Ref<{
//   uname: string
//   age: number
// }> = ref({
//   uname: '小明',
//   age: 20
// })

let xm: Ref<PersonInterface> = ref({
  uname: '小明',
  age: 20
})

const updateXmUname = () => {
  xm.value.uname = '小刚'
}

const goodsList:Ref<PersonInterface[]> = ref([{
  uname:'aa',
  age:20
},{
  uname:'bbb',
  age:10
},{
  uname:'ccc',
  age:30
}])
</script>

<template>
  <h1>{{ msg }}</h1>
  <p>count:{{ count }}</p>
  <button @click="updateCount(2)">count+2</button>
  <ul>
    <li v-for="item in arr">{{ item }}</li>
  </ul>
  <p>名字:{{ xm.uname }}</p>
  <button @click="updateXmUname">修改xm的uname</button>
</template>

<style scoped></style>
